<template>
  <div class="zujian">
    <p class="dingdan">课程订单>课程详情</p>
    <ul>
      <li>
        <div class="block li1">已支付</div>
        <span class="less li11"></span>
      </li>
      <li>
        <samp class="less1 left"></samp>
        <div class="block">待支付</div>
        <span class="less right"></span>
      </li>
      <li>
        <samp class="less1 left"></samp>
        <div class="block">学习中</div>
        <span class="less"></span>
      </li>
      <li>
        <samp class="less1 left"></samp>
        <div class="block">已关闭</div>
        <span class="less"></span>
      </li>
    </ul>
    <div class="clearfix"></div>
    <div class="xinxi">
      <span></span>
      订单信息
    </div>
    <el-card class="box-card">
      <div class="text item">
        <div>
          <p>订单编号：{{resa.id}}</p>
          <p>下单时间：{{resa.date}}</p>
          <p>支付方式：支付宝</p>
        </div>
        <div class="text-rit">
          <p>订单编号：{{resa.state}}</p>
          <p>支付时间：{{resa.date}}</p>
          <p>实付金额：<span style="color: #fb837c">{{resa.money}}</span></p>
        </div>
      </div>
    </el-card>
    <div class="xinxi">
      <span></span>
      课程信息
    </div>
    <el-card class="box-card">
      <div class="text item">
        <div>
          <div class="tu">
            <img src="../../../assets/images/1.jpg" alt="" />
            <div>{{resa.name}}</div>
          </div>
          <div>
            <p>课程编号:{{resa.id}}</p>
            <p>课程价格:{{resa.money}}</p>
            <p>上传人:管理员</p>
          </div>
        </div>
        <div class="text-rit">
          <p>课程名称:{{resa.name}}</p>
          <p>销量:2021</p>
          <p>更新时间:{{resa.date}}</p>
        </div>
      </div>
    </el-card>
    <div class="xinxi">
      <span></span>
      买家信息
    </div>
    <el-card class="box-card">
      <div class="text item">
        <div>
          <p>买家昵称:{{resa.vxname}}</p>
        </div>
        <div class="text-rit1">
          <p>手机号:17823341243</p>
        </div>
        <p class="guanbi">
          <el-button type="primary" plain @click="guanbi">关闭订单</el-button> 卖家还有 1 时 20
          分 7 秒关闭订单，否则系统将自动关闭订单
        </p>
      </div>
    </el-card>
  </div>
</template>

<script>
import service from "../../../mock/index";
import {useRouter} from 'vue-router';
import { onMounted,ref } from 'vue';
export default {

setup(){
const router=useRouter()
const resa=ref([]);
   onMounted(()=>{
       service.getset(router.currentRoute.value.params.id).then((res) => {
           console.log(res);
         resa.value=res.datas;
        
 
      })
    });

    const guanbi=()=>{
    //  router.go(-1)
      router.push({path:"/order/kcdd"})
   
    }
return{
    router,
    resa,
    guanbi
}
}
}
</script>

<style lang="less" scoped>
.zujian {
  width: 100%;
  height: 100%;
  background: #fff;
  .dingdan {
    height: 30px;
    font-size: 14px;
    font-weight: 700;
    line-height: 30px;
    padding: 4px;
  }
  .clearfix {
    clear: both;
  }
  ul {
    margin-left: 100px;
    margin-top: 20px;
  }
  li {
    float: left;
    width: 260px;
    height: 40px;
    position: relative;
    margin-left: -59px;
    .less {
      border-style: dashed dashed dashed solid;
      border-color: transparent transparent transparent #eeeeee;
      border-width: 15px 0 15px 15px;
      // position: absolute;
      top: 0;
      // right: 30px;
    } /*dashed 设置透明*/
    .less1 {
      border-style: dashed dashed dashed solid;
      border-color: transparent transparent transparent #a7a7a7;
      border-width: 15px 0 15px 15px;
      top: 0;
    }
    .right {
      right: 0;
    }
    .left {
      left: 0;
    }
    samp {
      display: block;
      position: absolute;
      z-index: 2;
    }
    span {
      display: block;
      position: relative;
      float: left;
      z-index: 3;
    }
    .block {
      width: 200px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: #eeeeee;
      vertical-align: middle;
      color: #333333;
      float: left;
      z-index: 1;
    }
    .li1 {
      background: #598cff;
      color: #fff;
    }
    .li11 {
      border-color: transparent transparent transparent #598cff;
    }
  }
  .xinxi {
    margin-left: 42px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    span {
      border-left: 3px solid #598cff;
      margin-right: 10px;
    }
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }
  /deep/.el-card__body {
    padding-top: 10px;
  }
  .box-card {
    margin-left: 41px;
    width: 90%;
    // height: 140px;
    div {
      float: left;
      margin-left: 40px;
      p {
        line-height: 30px;
        letter-spacing: 3px;
      }
      .tu {
        width: 100px;
        height: 90px;
        margin-left: -30px;
        //   margin-right: 50px;
        text-align: center;
        font-size: 12px;
        img {
          width: 100px;
          height: 50px;
        }
        div {
          margin: 10px;
        }
      }
    }
    .text-rit {
      margin-left: 200px;
    }
    .text-rit1 {
      margin-left: 330px;
    }
    .guanbi {
      margin: 50px 0 0 40px;
    }
  }
}
</style>
